<template>
  <view class="training-detail">
    <!-- 状态栏 -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }">
      <text class="time">{{ currentTime }}</text>
      <view class="status-icons">
        <text class="fa fa-signal"></text>
        <text class="fa fa-wifi"></text>
        <text class="fa fa-battery-full"></text>
      </view>
    </view>

    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="nav-back" @tap="goBack">
        <text class="fa fa-chevron-left fa-gray"></text>
      </view>
      <text class="nav-title">培训详情</text>
      <view class="nav-right" @tap="goToCalendar">
        <text class="fa fa-calendar"></text>
      </view>
    </view>

    <!-- 主内容区域 -->
    <scroll-view scroll-y class="page-content">
      <!-- 培训头部 -->
      <view class="section">
        <view class="training-header">
          <view class="header-content">
            <view class="icon-box purple">
              <text class="fa fa-graduation-cap fa-2x"></text>
            </view>
            <view class="header-info">
              <text class="training-title">住院医师规范化培训实习</text>
              <text class="training-project">项目：住院医师规范化培训</text>
              <text class="training-time">开始：2025.01.15 08:00</text>
              <text class="training-time">结束：2025.12.15 18:00</text>
              <text class="training-location">地点：内科、外科、急诊科</text>
              <text class="training-teacher">讲师：李主任</text>
            </view>
            <view class="header-status">
              <text class="status-tag green">进行中</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 快速操作 -->
      <view class="section">
        <view class="action-card">
          <button class="scan-button" @tap="showQRCode">
            <text class="fa fa-qrcode" style="color: #fff"></text>
            <text class="button-text">扫码签到</text>
          </button>
        </view>
      </view>

      <!-- 培训进度 -->
      <view class="section">
        <view class="progress-card">
          <view class="progress-header">
            <text class="progress-title">培训进度</text>
            <text class="progress-percentage">68% 完成</text>
          </view>
          <view class="progress-bar">
            <view class="progress-track">
              <view
                class="progress-fill"
                :style="{ width: trainingProgress + '%' }"
              ></view>
            </view>
            <text class="progress-text">{{ trainingProgress }}%</text>
          </view>
          <view class="progress-stats">
            <view class="progress-stat">
              <text class="stat-label">签到次数</text>
              <text class="stat-value blue">12/18</text>
            </view>
            <view class="progress-stat">
              <text class="stat-label">完成课时</text>
              <text class="stat-value green">85/125</text>
            </view>
            <view class="progress-stat">
              <text class="stat-label">考试成绩</text>
              <text class="stat-value purple">88分</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 培训资料 -->
      <view class="section">
        <view class="materials-card">
          <view class="materials-header">
            <text class="materials-title">培训资料</text>
            <text class="materials-count">共8个文件</text>
          </view>
          <view class="materials-list">
            <!-- PDF文件 -->
            <view class="material-item">
              <view class="file-icon red">
                <text
                  class="fa fa-file-pdf-o"
                  style="color: rgb(255 69 0)"
                ></text>
              </view>
              <view class="file-info">
                <text class="file-name">住院医师培训大纲.pdf</text>
                <text class="file-meta">2.5MB • 2025.01.10</text>
              </view>
              <view class="file-action" @tap="downloadFile('pdf')">
                <text
                  class="fa fa-download"
                  style="color: rgb(37 99 235)"
                ></text>
              </view>
            </view>

            <!-- Word文件 -->
            <view class="material-item">
              <view class="file-icon blue">
                <text
                  class="fa fa-file-word-o"
                  style="color: rgb(25 83 168)"
                ></text>
              </view>
              <view class="file-info">
                <text class="file-name">临床技能考核标准.docx</text>
                <text class="file-meta">1.8MB • 2025.01.12</text>
              </view>
              <view class="file-action" @tap="downloadFile('word')">
                <text
                  class="fa fa-download"
                  style="color: rgb(37 99 235)"
                ></text>
              </view>
            </view>

            <!-- Excel文件 -->
            <view class="material-item">
              <view class="file-icon green">
                <text
                  class="fa fa-file-excel-o"
                  style="color: rgb(44 160 44)"
                ></text>
              </view>
              <view class="file-info">
                <text class="file-name">培训计划表.xlsx</text>
                <text class="file-meta">0.9MB • 2025.01.08</text>
              </view>
              <view class="file-action" @tap="downloadFile('excel')">
                <text
                  class="fa fa-download"
                  style="color: rgb(37 99 235)"
                ></text>
              </view>
            </view>

            <!-- PPT文件 -->
            <view class="material-item">
              <view class="file-icon orange">
                <text
                  class="fa fa-file-powerpoint-o"
                  style="color: rgb(255 165 0)"
                ></text>
              </view>
              <view class="file-info">
                <text class="file-name">急诊科轮转指南.pptx</text>
                <text class="file-meta">5.2MB • 2025.01.15</text>
              </view>
              <view class="file-action" @tap="downloadFile('ppt')">
                <text
                  class="fa fa-download"
                  style="color: rgb(37 99 235)"
                ></text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 签到记录 -->
      <view class="section">
        <view class="attendance-card">
          <view class="attendance-header">
            <text class="attendance-title">签到记录</text>
            <text class="attendance-link" @tap="viewAllAttendance"
              >查看全部</text
            >
          </view>
          <view class="attendance-list">
            <!-- 正常签到 -->
            <view class="attendance-item normal">
              <view class="attendance-icon green">
                <text class="fa fa-check" style="color: rgb(44 160 44)"></text>
              </view>
              <view class="attendance-info">
                <text class="attendance-name">今日签到</text>
                <text class="attendance-meta">2025.01.18 08:30 • 内科病房</text>
              </view>
              <text class="attendance-status green">正常</text>
            </view>

            <!-- 迟到签到 -->
            <view class="attendance-item late">
              <view class="attendance-icon yellow">
                <text
                  class="fa fa-clock-o"
                  style="color: rgb(255 165 0)"
                ></text>
              </view>
              <view class="attendance-info">
                <text class="attendance-name">昨日签到</text>
                <text class="attendance-meta">2025.01.17 09:15 • 外科病房</text>
              </view>
              <text class="attendance-status yellow">迟到</text>
            </view>

            <!-- 缺勤 -->
            <view class="attendance-item absent">
              <view class="attendance-icon red">
                <text class="fa fa-times" style="color: rgb(255 69 0)"></text>
              </view>
              <view class="attendance-info">
                <text class="attendance-name">1月16日</text>
                <text class="attendance-meta">急诊科</text>
              </view>
              <text class="attendance-status red">缺勤</text>
            </view>
          </view>
        </view>
      </view>

      <view class="bottom-space"></view>
    </scroll-view>

    <!-- 二维码弹窗 -->
    <view v-if="showQR" class="qr-modal" @tap="closeQRCode">
      <view class="qr-content" @tap.stop>
        <text class="qr-title">扫码签到</text>
        <view class="qr-box">
          <view class="qr-code">
            <text class="qr-icon">📱</text>
            <text class="qr-hint">请使用微信扫码</text>
          </view>
        </view>
        <text class="qr-desc">请使用微信扫描二维码完成签到</text>
        <button class="qr-close" @tap="closeQRCode">
          <text class="close-text">关闭</text>
        </button>
      </view>
    </view>

    <!-- 底部导航 -->
    <view class="tabbar">
      <view class="tab-item" @tap="navigateToHome">
        <text class="fa fa-home"></text>
        <text class="tab-text">首页</text>
      </view>
      <view class="tab-item active">
        <text class="fa fa-clipboard"></text>
        <text class="tab-text active">工作台</text>
      </view>
      <view class="tab-item" @tap="navigateToProfile">
        <text class="fa fa-user"></text>
        <text class="tab-text">我的</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: 0,
      currentTime: "09:41",
      trainingProgress: 68,
      showQR: false,
    };
  },
  onLoad() {
    this.initStatusBar();
    this.updateTime();
  },
  methods: {
    initStatusBar() {
      const systemInfo = uni.getSystemInfoSync();
      this.statusBarHeight = systemInfo.statusBarHeight || 20;
    },
    updateTime() {
      const now = new Date();
      const hours = String(now.getHours()).padStart(2, "0");
      const minutes = String(now.getMinutes()).padStart(2, "0");
      this.currentTime = `${hours}:${minutes}`;
    },
    goBack() {
      uni.navigateBack();
    },
    goToCalendar() {
      uni.navigateTo({
        url: "/pages/calendar",
      });
    },
    showQRCode() {
      this.showQR = true;
    },
    closeQRCode() {
      this.showQR = false;
    },
    downloadFile(type) {
      uni.showToast({
        title: `下载${type}文件`,
        icon: "none",
      });
    },
    viewAllAttendance() {
      uni.showToast({
        title: "查看全部签到记录",
        icon: "none",
      });
    },
    navigateToHome() {
      uni.switchTab({
        url: "/pages/home",
      });
    },
    navigateToProfile() {
      uni.switchTab({
        url: "/pages/profile",
      });
    },
  },
};
</script>

<style scoped>
.training-detail {
  min-height: 100vh;
  background: linear-gradient(135deg, #f9fafb 0%, #eff6ff 100%);
}

.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 32rpx;
  font-size: 24rpx;
  color: #9ca3af;
  background-color: #ffffff;
}

.status-icons {
  display: flex;
  gap: 16rpx;
}

.icon {
  font-size: 24rpx;
}

.nav-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 88rpx;
  padding: 0 32rpx;
  background-color: #ffffff;
  border-bottom: 1rpx solid #f3f4f6;
}

.nav-back {
  position: absolute;
  left: 32rpx;
  padding: 8rpx;
}

.back-icon {
  font-size: 36rpx;
  color: #6b7280;
}

.nav-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #111827;
}

.nav-right {
  position: absolute;
  right: 32rpx;
  padding: 8rpx;
}

.right-icon {
  font-size: 36rpx;
  color: #6b7280;
}

.page-content {
  height: calc(100vh - 88rpx - 120rpx);
}

.section {
  padding: 0 32rpx;
  margin-top: 24rpx;
}

.training-header {
  background-color: #ffffff;
  border-radius: 32rpx;
  padding: 32rpx;
  box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.04);
  border: 1rpx solid #f3f4f6;
}

.header-content {
  display: flex;
  gap: 24rpx;
}

.icon-box {
  width: 128rpx;
  height: 128rpx;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-box.purple {
  background-color: #f3e8ff;
}

.icon-box .icon {
  font-size: 48rpx;
}

.header-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.training-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #111827;
}

.training-project,
.training-time,
.training-location,
.training-teacher {
  font-size: 24rpx;
  color: #6b7280;
}

.header-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.status-tag {
  font-size: 22rpx;
  padding: 8rpx 16rpx;
  border-radius: 999rpx;
  font-weight: 500;
}

.status-tag.green {
  background-color: #d1fae5;
  color: #047857;
}

.action-card {
  background-color: #ffffff;
  border-radius: 32rpx;
  padding: 32rpx;
  box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.04);
  border: 1rpx solid #f3f4f6;
}

.scan-button {
  /* width: 100%; */
  height: 88rpx;
  background: linear-gradient(to right, #16a34a, #10b981);
  border-radius: 24rpx;
  padding: 0 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  box-shadow: 0 4rpx 12rpx rgba(22, 163, 74, 0.3);
  border: none;
}

.button-icon {
  font-size: 32rpx;
  color: #fff;
}

.button-text {
  font-size: 32rpx;
  font-weight: 500;
  color: #fff;
}

.progress-card {
  background-color: #ffffff;
  border-radius: 32rpx;
  padding: 32rpx;
  box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.04);
  border: 1rpx solid #f3f4f6;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}

.progress-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #111827;
}

.progress-percentage {
  font-size: 24rpx;
  color: #6b7280;
}

.progress-bar {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-bottom: 24rpx;
}

.progress-track {
  flex: 1;
  height: 16rpx;
  background-color: #e5e7eb;
  border-radius: 999rpx;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6 0%, #6366f1 100%);
  border-radius: 999rpx;
  transition: width 0.3s;
}

.progress-text {
  font-size: 28rpx;
  font-weight: 500;
  color: #6b7280;
}

.progress-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24rpx;
}

.progress-stat {
  background-color: #f9fafb;
  border-radius: 16rpx;
  padding: 16rpx;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.stat-label {
  font-size: 22rpx;
  font-weight: 500;
  color: #111827;
}

.stat-value {
  font-size: 28rpx;
  font-weight: 700;
}

.stat-value.blue {
  color: #2563eb;
}

.stat-value.green {
  color: #10b981;
}

.stat-value.purple {
  color: #9333ea;
}

.materials-card {
  background-color: #ffffff;
  border-radius: 32rpx;
  padding: 32rpx;
  box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.04);
  border: 1rpx solid #f3f4f6;
}

.materials-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}

.materials-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #111827;
}

.materials-count {
  font-size: 24rpx;
  color: #6b7280;
}

.materials-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.material-item {
  display: flex;
  align-items: center;
  gap: 24rpx;
  padding: 16rpx;
  background-color: #f9fafb;
  border-radius: 16rpx;
}

.file-icon {
  width: 64rpx;
  height: 64rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.file-icon.red {
  background-color: #fecaca;
}

.file-icon.blue {
  background-color: #dbeafe;
}

.file-icon.green {
  background-color: #d1fae5;
}

.file-icon.orange {
  background-color: #fed7aa;
}

.file-icon .icon {
  font-size: 32rpx;
}

.file-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4rpx;
}

.file-name {
  font-size: 28rpx;
  font-weight: 500;
  color: #111827;
}

.file-meta {
  font-size: 24rpx;
  color: #6b7280;
}

.file-action {
  padding: 8rpx;
}

.action-icon {
  font-size: 28rpx;
  color: #2563eb;
}

.attendance-card {
  background-color: #ffffff;
  border-radius: 32rpx;
  padding: 32rpx;
  box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.04);
  border: 1rpx solid #f3f4f6;
}

.attendance-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}

.attendance-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #111827;
}

.attendance-link {
  font-size: 24rpx;
  color: #2563eb;
}

.attendance-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.attendance-item {
  display: flex;
  align-items: center;
  gap: 24rpx;
  padding: 16rpx;
  border-radius: 8rpx;
}

.attendance-item.normal {
  background-color: #f0fdf4;
  border-left: 4rpx solid #10b981;
}

.attendance-item.late {
  background-color: #fef3c7;
  border-left: 4rpx solid #f59e0b;
}

.attendance-item.absent {
  background-color: #fef2f2;
  border-left: 4rpx solid #ef4444;
}

.attendance-icon {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.attendance-icon.green {
  background-color: #d1fae5;
}

.attendance-icon.yellow {
  background-color: #fde68a;
}

.attendance-icon.red {
  background-color: #fecaca;
}

.attendance-icon .icon {
  font-size: 24rpx;
}

.attendance-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4rpx;
}

.attendance-name {
  font-size: 28rpx;
  font-weight: 500;
  color: #111827;
}

.attendance-meta {
  font-size: 24rpx;
  color: #6b7280;
}

.attendance-status {
  font-size: 24rpx;
  font-weight: 500;
}

.attendance-status.green {
  color: #10b981;
}

.attendance-status.yellow {
  color: #f59e0b;
}

.attendance-status.red {
  color: #ef4444;
}

.bottom-space {
  height: 32rpx;
}

/* 二维码弹窗 */
.qr-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.qr-content {
  background-color: #ffffff;
  border-radius: 32rpx;
  padding: 48rpx;
  margin: 32rpx;
  max-width: 600rpx;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.qr-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #111827;
  margin-bottom: 32rpx;
}

.qr-box {
  background-color: #f9fafb;
  border-radius: 24rpx;
  padding: 32rpx;
  margin-bottom: 32rpx;
}

.qr-code {
  width: 384rpx;
  height: 384rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16rpx;
}

.qr-icon {
  font-size: 96rpx;
  color: #9ca3af;
}

.qr-hint {
  font-size: 24rpx;
  color: #6b7280;
}

.qr-desc {
  font-size: 28rpx;
  color: #6b7280;
  text-align: center;
  margin-bottom: 32rpx;
}

.qr-close {
  width: 100%;
  background-color: #f3f4f6;
  color: #374151;
  border-radius: 24rpx;
  padding: 0 24rpx;
  border: none;
}

.close-text {
  color: #374151;
  font-size: 28rpx;
}

.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120rpx;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20rpx);
  border-top: 1rpx solid #f3f4f6;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
  padding: 16rpx 0;
}

.tab-icon {
  font-size: 36rpx;
}

.tab-text {
  font-size: 24rpx;
  color: #6b7280;
}

.tab-item.active .tab-text {
  color: #2563eb;
  font-weight: 500;
}
</style>
